<template>
    <view class="taobao-page">
        <!-- 商品轮播图 -->
        <u-swiper :list="goods.urlLink.split(',')" radius="0" height="375" @click="previewImage"></u-swiper>

        <!-- 商品基本信息 -->
        <view class="goods-info">
            <!-- <view class="price" v-if="isVip">
              <text>¥{{goods.vipPrice}}</text>
              <text class="original">¥{{goods.price}}</text>
            </view>
            <view class="price" v-else>
              <text>¥{{goods.price}}</text>
            </view> -->
            <view class="title">{{goods.name}}</view>
            <view class="price">
                <text>¥{{goods.price}}</text>
                <!--        <text class="vip-price">VIP：¥{{goods.vipPrice}}</text>-->
            </view>

            <view class="sales">已售{{goods.num}}件</view>
            <view class="desc">{{goods.info}}</view>
        </view>

        <!-- 商品详情 -->
        <view class="detail-section">
            <view class="title">商品详情</view>
            <rich-text :nodes="goods.infoDesc"></rich-text>
        </view>

        <!-- 底部操作栏 -->
        <view class="footer-bar">
            <u-button customStyle="border: #999999 0rpx dashed;font-size: 32rpx;height: unset;width: unset;justify-content:left;" open-type="contact">
                <view class="contact">
                    <u-icon name="server-fill" size="24" color="#666"></u-icon>
                    <text>客服</text>
                </view>
            </u-button>
            <button class="btn cart" @click="addToCart">
                <text>加入购物车</text>
            </button>
            <button class="btn buy" @click="buyNow">
                <text>去结算</text>
            </button>
        </view>

        <u-modal :show="show" title="订单确认" showCancelButton @cancel="show = false" @confirm="handleConfirm">
            <u--form labelPosition="left" labelWidth="auto" :model="model1" :rules="rules" ref="uForm">

                <u-form-item prop="userInfo.phone" ref="item1">
                    <view class="item-box">
                        <!-- <view class="logo">
                        </view> -->
                        <u-icon name="phone" :color="mainColor" size="28"></u-icon>
                        <u-input v-model="model1.userInfo.phone" placeholder="请填写手机号" border="none"></u-input>
                    </view>
                </u-form-item>
                <u-form-item prop="userInfo.address" ref="item1">
                    <view class="item-box">
                        <u-icon name="home" :color="mainColor" size="28"></u-icon>
                        <view class="select-box">
                            <u-input v-model="model1.userInfo.address" placeholder="请填写收货地址" border="none"></u-input>
                            <view @click="handleGetAddress" class="get-address">
                                <u-icon name="map-fill" color="#EB6121" size="20"></u-icon>
                            </view>
                        </view>
                    </view>
                </u-form-item>
                <view class="item-box">
                    <u-icon name="clock" :color="mainColor" size="24"></u-icon>
                    <view class="select-box" @click="showTime = true">
                        <text style="color: #303133; font-size: 30rpx" v-if="model1.userInfo.deliveryTime">{{ model1.userInfo.deliveryTime}}</text>
                        <text style="color: #c0c4cc; font-size: 30rpx" v-else>请选择上门时间</text>
                        <u-icon name="arrow-right" color="#E9EAEB"></u-icon>
                    </view>
                </view>
                <u-form-item>
                    <view class="form-item">
                        <view class="item-box">
                            <u-icon name="zhifubao" :color="mainColor" size="28"></u-icon>
                            <view class="select-box" @click="showPay = true">
                                <text style="color: #c0c4cc; font-size: 30rpx" v-if="!payWay">付款方式</text>
                                <text style="font-size: 30rpx" v-else>{{payWay}}</text>
                                <text style="color: #999"></text>
                                <view class="pay-box">
                                    <u-icon name="arrow-right" color="#E9EAEB"></u-icon>
                                </view>
                            </view>
                        </view>
                    </view>
                </u-form-item>
                <!-- <u-form-item label="余额抵扣：" ref="item1">
                  <view class="dis_f_sb_c">
                    <u-switch v-model="model1.userInfo.isDeduction" @change="change"></u-switch>
                    <view style="color:#999;font-size: 26rpx;">当前余额: {{myInfoVo.amount}}</view>
                  </view>
                </u-form-item> -->
            </u--form>
        </u-modal>
        <u-picker ref="uPicker" :show="showTime" :columns="columns" @change="changeHandler" @cancel="showTime=false" @confirm="confirm"></u-picker>
        <!-- 驿站选择器 -->
        <u-picker :show="showStation" :columns="stationList" keyName="nickName" :confirmColor="mainColor" @close="showStation = false" @cancel="showStation = false" :closeOnClickOverlay="true" @confirm="handleStationConfirm"></u-picker>
        <!-- 付款方式选择器 -->
        <u-picker :show="showPay" :columns="payList" keyName="label" :confirmColor="mainColor" @close="showPay = false" @cancel="showPay = false" :closeOnClickOverlay="true" @confirm="handlePayConfirm"></u-picker>
        <u-popup :show="showOrder" closeable @close="showOrder=false" mode="bottom">
            <view class="p_20">
                <view class="dis_f_c_c">订单确认</view>
                <u--form labelPosition="left" labelWidth="auto" :model="model1" :rules="rules" ref="uForm">

                    <u-form-item prop="userInfo.phone" ref="item1" label="手机号">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.phone" placeholder="请填写手机号" border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.gameIdNo" ref="item1" label="游戏ID">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.gameIdNo" placeholder="请填写游戏ID" border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.gameAreaType" ref="item1" label="游戏区服">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-radio-group
                                v-model="model1.userInfo.gameAreaType"
                                placement="row"
                                @change="groupChange"
                            >
                                <u-radio
                                    :customStyle="{marginRight: '8px'}"
                                    v-for="(item, index) in radiolist"
                                    :key="index"
                                    :label="item"
                                    :name="item"
                                >
                                </u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.remark" ref="item1" label="备注">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.remark" placeholder="请填写备注" border="none"></u-input>
                        </view>
                    </u-form-item>
                </u--form>
                <view class="m_t_10">
                    <u-button type="primary" @click="handleConfirm">提交</u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    getByKeyApi,
    getGoodsApi,
    addCartApi,
    createOrderApi,
    getLastOrderApi,
    getTimeApi,
    payApi,
    getStationListApi, addOrderApi, postAddOrderApi,
} from "@/sheep/api/index.js";
import { getMyInfoApi } from "@/sheep/api/baseApi.js";
import { getAddress } from "@/sheep/utils/common.js";
import { xcxTopUp } from "@/sheep/utils/wxUtil";
export default {
    data() {
        return {
            showOrder:false,
            radiolist: [],
            goods: {
                goodsId: "",
                name: "",
                price: 0,
                vipPrice: 0,
                num: 0,
                urlLink: "",
                info: "",
                infoDesc: "",
            },
            quantity: 1,
            isVip: false,
            show: false,
            myInfoVo: {},
            model1: {
                userInfo: {
                    phone: "",
                    gameIdNo: "",
                    remark: "",
                    gameAreaType: "",
                },
            },
            rules: {
                "userInfo.phone": {
                    type: "string",
                    required: true,
                    message: "请输入手机号",
                    trigger: ["blur", "change"],
                },
                "userInfo.gameIdNo": {
                    type: "string",
                    required: true,
                    message: "请输入游戏ID",
                    trigger: ["blur", "change"],
                },
                "userInfo.gameAreaType": {
                    type: "string",
                    required: true,
                    message: "请选择游戏区服",
                    trigger: ["blur", "change"],
                }
            },
            showStation: false,
            stationList: [],
            mainColor: "#EB6121", // 主题色
            showPay: false,
            payWay: "",
            payList: [
                [
                    {
                        label: "微信支付",
                        id: 1,
                    },
                    {
                        label: "余额支付",
                        id: 2,
                    },
                ],
            ],
            payWayId: null,
            showTime: false,
            columns: [[], []],
            columnData: [[], []],
        };
    },
    onLoad(options) {
        this.goods.goodsId = options.goodsId;
        this.getGoods();
        this.getTime();
        this.getStationList(); // 获取驿站列表
        this.payWay = this.payList[0][0].label;
        this.payWayId = this.payList[0][0].id;
    },
    methods: {
        groupChange(n) {
            this.model1.userInfo.gameAreaType = n;
        },
        async getGoods() {
            let res = await getGoodsApi(this.goods.goodsId);
            this.goods = res.data;
            this.goods.infoDesc = this.goods.infoDesc.replace(
                /<img/g,
                '<img style="width:100%"'
            );
            this.radiolist = res.data.gameArea.split('-');
            this.model1.userInfo.goodsId = res.data.goodsId;
        },

        previewImage(index) {
            uni.previewImage({
                current: index,
                urls: this.goods.images,
            });
        },

        addToCart(item) {
            let cartForm = {
                goodsMallId: this.goods.goodsId,
                isAdd: 1,
            };
            addCartApi(cartForm).then((res) => {
                if (res.code == 200) {
                    uni.showToast({
                        title: "已加入购物车",
                        icon: "success",
                    });
                }
            });
        },

        buyNow() {
            // uni.switchTab({
            //   url: "/pages/cart/index",
            // });
            // this.show = true;
            this.showOrder  = true;
            this.getLast();
            this.getMyInfo();
        },
        getMyInfo() {
            getMyInfoApi().then((res) => {
                this.isVip = res.data.isVip == "1";
                this.myInfoVo = res.data;
                this.model1.userInfo.phone = res.data?.phonenumber;
            });
        },
        getLast() {
            getLastOrderApi().then((res) => {
                if (res.data) {
                    this.model1.userInfo.station = res.data.stationName;
                    this.model1.userInfo.stationId = res.data.stationId;
                    this.model1.userInfo.address = res.data.address;
                }
            });
        },
        getTime() {
            getTimeApi().then((res) => {
                this.columns = res.data.columns;
                this.columnData = res.data.columnData;
            });
        },
        confirm(e) {
            this.model1.userInfo.deliveryTime = e.value[0] + " " + e.value[1];
            this.showTime = false;
        },
        handleStationConfirm(e) {
            this.model1.userInfo.station = e.value[0].nickName;
            this.model1.userInfo.stationId = e.value[0].userId;
            this.showStation = false;
        },
        /**
         * 处理选择变化事件
         */
        change(e) {},
        // 获取驿站列表
        getStationList() {
            getStationListApi().then((res) => {
                this.stationList = [res.data];
            });
        },
        handleConfirm() {
            this.$refs.uForm.validate().then((res) => {
                postAddOrderApi(this.model1.userInfo).then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: "none",
                    });
                    if (res.code == 200) {
                        this.showOrder = false;
                        //延迟两秒
                        setTimeout(() => {
                            uni.navigateTo({
                                url: "/pages/order/index",
                            });
                        },2000)

                        /*                            payApi(res.data.orderId).then((res) => {
                                                        if (res.code == 200) {
                                                            uni.showToast({
                                                                title: "支付成功",
                                                                icon: "none",
                                                            });
                                                            // 重置表单
                                                            this.show = false;
                                                            uni.navigateTo({
                                                                url: "/pages/order/index",
                                                            });
                                                        } else {
                                                            uni.showToast({
                                                                title: "支付失败," + res.msg,
                                                                icon: "none",
                                                            });
                                                        }
                                                    });*/
                    }
                });
            });
        },
        // 获取地址
        handleGetAddress() {
            getAddress().then((res) => {
                this.model1.userInfo.address = res;
            });
        },
        // 付款方式
        handlePayConfirm(e) {
            this.payWay = e.value[0].label;
            this.payWayId = e.value[0].id;
            this.showPay = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.taobao-page {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 120rpx;

    .goods-info {
        background: #fff;
        padding: 20rpx;
        margin-bottom: 20rpx;

        .price {
            color: #f44;
            font-size: 36rpx;
            font-weight: bold;
            .vip-price {
                margin-left: 10rpx;
                background-color: #f44;
                color: #fff;
                border-radius: 4rpx;
                width: fit-content;
                padding: 0 10rpx;
                font-size: 30rpx;
                // margin: 10rpx 0;
            }
            .original {
                color: #999;
                text-decoration: line-through;
                font-size: 24rpx;
                margin-left: 10rpx;
            }
        }

        .title {
            font-size: 32rpx;
            line-height: 1.5;
            margin: 10rpx 0;
            font-weight: 700;
        }

        .sales {
            font-size: 24rpx;
            color: #999;
        }
        .desc {
            color: #333;
            font-size: 28rpx;
            margin: 10rpx 0;
        }
    }

    .detail-section {
        background: #fff;
        padding: 20rpx;

        .title {
            font-size: 28rpx;
            padding: 20rpx 0;
            border-bottom: 1rpx solid #eee;
        }
    }

    .footer-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120rpx;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);

        .btn {
            height: 88rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 44rpx;
            font-size: 28rpx;
            font-weight: 500;
            margin: 0 10rpx;
            padding: 0 20rpx;
            border: none;
            transition: all 0.2s;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

            &:active {
                transform: translateY(2rpx);
                box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
            }
            &.cart {
                flex: 2;
                background: linear-gradient(to right, #ffb347, #ff976a);
                color: #fff;
                text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);

                &:active {
                    background: linear-gradient(to right, #ffa030, #ff8747);
                }
            }

            &.buy {
                flex: 2;
                background: linear-gradient(to right, #ff4d4d, #f44);
                color: #fff;
                text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);

                &:active {
                    background: linear-gradient(to right, #ff3333, #e60000);
                }
            }
        }
        .contact {
            display: flex;
            flex: 1;
            padding: 0 30rpx;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #666;
        }
    }
}
::v-deep .u-modal__content {
    padding: 20rpx 0 !important;
}
::v-deep .u-form {
    width: 80% !important;
}
.item-box {
    display: flex;
    align-items: center;
    line-height: 80rpx;
    .logo {
        margin-right: 10rpx;
    }
}
.select-box {
    // height: 80rpx;
    margin-left: 10rpx;
    line-height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    .pay-box {
        display: flex;
        align-items: center;
    }
}
</style>
